<template>
  <div>
    <search-form @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-if="$permiss[706]">
        <el-form-item :label="$t('所属租户')">
          <el-select v-model="page.adminUserId" style="width: 100%" @change="tenantChange">
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-if="$permiss[707]">
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.productName">
            <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              :clearable="false"
              :default-time="['00:00:00', '23:59:59']"
              range-separator="~"
              unlink-panels
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </search-form>
    <el-card shadow="never" style="margin-top: 10px">
      <el-tabs v-model="tabsActive" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tabsList" :key="index" :label="item.label" v-if="!item.isHide"
                     :name="item.value"></el-tab-pane>
      </el-tabs>
      <Table @handleSizeChange="handleSizeChange" :loading="loading" @handleCurrentChange="handleCurrentChange"
             :table-data="tableData"
             :table-column="tableColumn" :page="page" max-height="600px" isShowSummary :summaryMethod='summaryMethod'>
        <template slot="first">
          <el-table-column prop="time" :label="$t('日期')" align="center" min-width="150" fixed="left"></el-table-column>
          <el-table-column prop="appName" :label="$t('APP名称')" align="center" min-width="100"></el-table-column>
        </template>
      </Table>
    </el-card>
  </div>
</template>

<script>
import {permissProcess, dateFormat, defaultTimeDate} from "@/utils/tools";
import {selectProduct, selectTenant} from "@/api/system";

export default {
  name: 'operationData',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(14)
      },
      productList: [],
      tenantList: [],
      tabsActive: "",
      tabsList: [
        {label: this.$t('营销部'), value: 'marketing', isHide: !this.$permiss[698]},
        {label: this.$t('信审部'), value: 'audit', isHide: !this.$permiss[700]},
        {label: this.$t('提醒部'), value: 'remind', isHide: !this.$permiss[702]},
        {label: this.$t('催收部'), value: 'collection', isHide: !this.$permiss[704]},
      ],
      listUrl: '',
      tableColumn: [],
      tableData: [],
      marketColumn: [
        {label: this.$t('初借申请数'), prop: 'newApply', minWidth: 100,},
        {label: this.$t('复借申请数'), prop: 'oldApply', minWidth: 100,},
        {label: this.$t('总申请数'), prop: 'count', minWidth: 100,},
        {label: this.$t('总申请金额'), prop: 'totalLoanAmount', minWidth: 100,},
        {label: this.$t('初借打款数'), prop: 'newPay', minWidth: 100,},
        {label: this.$t('复借打款数'), prop: 'oldPay', minWidth: 100,},
        {label: this.$t('总打款数'), prop: 'totalPay', minWidth: 100,},
        {label: this.$t('总打款金额'), prop: 'totalPayAmount', minWidth: 100,},
      ],
      auditColumn: [
        {label: this.$t('初借处理数'), prop: 'newDispose', minWidth: 100,},
        {label: this.$t('复借处理数'), prop: 'oldDispose', minWidth: 100,},
        {label: this.$t('总处理数'), prop: 'count', minWidth: 100,},
        {label: this.$t('初借通过数'), prop: 'newPass', minWidth: 100,},
        {label: this.$t('复借通过数'), prop: 'oldPass', minWidth: 100,},
        {label: this.$t('总通过数'), prop: 'totalPass', minWidth: 100,},
        {label: this.$t('总通过金额'), prop: 'totalPassAmount', minWidth: 100,},
        {label: this.$t('初借通过率'), prop: 'newPassRate', minWidth: 100,},
        {label: this.$t('复借通过率'), prop: 'oldPassRate', minWidth: 100,},
        {label: this.$t('总通过率'), prop: 'totalPassRate', minWidth: 100,},
      ],
      remindColumn: [
        {label: this.$t('应还数'), prop: 'shouldCount', minWidth: 100,},
        {label: this.$t('已还数'), prop: 'refund', minWidth: 100,},
        {label: this.$t('待还数'), prop: 'notRefund', minWidth: 100,},
        {label: this.$t('展期数'), prop: 'rollOver', minWidth: 100,},
        {label: this.$t('首逾率'), prop: 'firstOverdueRate', minWidth: 100,},
        {label: this.$t('D0应还数'), prop: 'd0ShouldCount', minWidth: 100,},
        {label: this.$t('D0已还数'), prop: 'd0Refund', minWidth: 100,},
        {label: this.$t('D0还款率'), prop: 'd0RefundRate', minWidth: 100,},
        {label: 'S1' + this.$t('应还数'), prop: 'd1ShouldCount', minWidth: 100,},
        {label: 'S1' + this.$t('已还数'), prop: 'd1Refund', minWidth: 100,},
        {label: 'S1' + this.$t('还款率'), prop: 'd1RefundRate', minWidth: 100,},
      ],
      collectionColumn: [
        {label: this.$t('M1订单数'), prop: 'shouldCount', minWidth: 100,},
        {label: this.$t('M1结清数'), prop: 'refund', minWidth: 100,},
        {label: this.$t('M1部分还款数'), prop: 'notRefund', minWidth: 100,},
        {label: this.$t('M1应还金额'), prop: 'rollOver', minWidth: 100,},
        {label: this.$t('M1催回金额'), prop: 'firstOverdueRate', minWidth: 100,},
        {label: this.$t('M1金额催回率'), prop: 'firstOverdueRate', minWidth: 100,},
      ],
      totalObj: {},
      loading: false
    }
  },
  watch: {
    tabsActive(value) {
      if (this.tabsList.filter(item => item.value === value).length) {
        switch (value) {
          case "audit":
            this.listUrl = 'buriedPoint/creditAduit'
            this.tableColumn = this.auditColumn
            break
          case "marketing":
            this.listUrl = 'buriedPoint/marketing'
            this.tableColumn = this.marketColumn
            break
          case "remind":
            this.listUrl = 'buriedPoint/remind'
            this.tableColumn = this.remindColumn
            break
          case "collection":
            this.listUrl = 'buriedPoint/guestDataList'
            this.tableColumn = this.collectionColumn
            break
        }
        this.getTableData()
      }
    }
  },
  created() {
    this.getSelect()
  },
  methods: {
    async getTableData() {
      this.loading = true
      const [datetimeStart, datetimeEnd] = this.page.timeValue || []
      const params = {
        ...this.page,
        datetimeStart, datetimeEnd
      }
      delete params.timeValue
      this.getDataTotal(params)
      const res = permissProcess(this.listUrl, this.$permiss) && await this.$get(this.listUrl, params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page = {...this.page, total}
        this.loading = false
      }
    },
    // 获取总计
    async getDataTotal(params) {
      const res = permissProcess(this.listUrl + 'Total', this.$permiss) && await this.$get(this.listUrl + 'Total', params)
      if (res.code === 1 && res.data) {
        this.totalObj = res.data
      }
    },
    // 重置search
    resetSearch() {
      let day_30 = new Date().setMonth((new Date().getMonth() - 1));    //日期是30天前的对应时间戳
      day_30 = new Date(day_30);       //转换成标准时间
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: [dateFormat(day_30, 'YYYY-mm-dd'), dateFormat(new Date(), 'YYYY-mm-dd')]
      }
      if (this.tenantList.length !== 0) this.$set(this.page, 'adminUserId', this.tenantList[0].adminUserId)
      if (this.productList.length !== 0) this.$set(this.page, 'productName', this.productList[0].productName)
      this.getTableData()
    },
    // 默认展示部门
    defaultActive() {
      const value = this.tabsList.filter(item => {
        return !item.isHide
      })
      // 默认取第一位
      if (this.tenantList.length) this.page.adminUserId = this.tenantList[0].adminUserId
      this.tabsActive = value[0].value
    },
    summaryMethod(params) {
      const {columns} = params
      const sums = []
      columns.forEach((item, index) => {
        if (index === 0) {
          sums[index] = this.$t('总计')
        }
        const num = this.totalObj[item.property]
        if (num && typeof num === 'number' && !isNaN(num) && isFinite(num)) {
          sums[index] = num
        }
      })
      return sums
    },
    handleClick() {
      this.page = {
        ...this.page,
        pageNum: 1, pageSize: 10, total: 0
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    async getSelect() {
      this.tenantList = await selectTenant().then(res => res.data)
      if (this.tenantList.length !== 0) this.$set(this.page, 'adminUserId', this.tenantList[0].adminUserId)
      this.productList = await selectProduct({adminUserId: this.page.adminUserId}).then(res => res.data)
      if (this.productList.length !== 0) this.$set(this.page, 'productName', this.productList[0].productName)
      this.defaultActive()
    },
    async tenantChange() {
      if (this.page.productName) this.page.productName = null
      this.productList = await selectProduct({adminUserId: this.page.adminUserId}).then(res => res.data)
      if (this.productList.length !== 0) this.$set(this.page, 'productName', this.productList[0].productName)
    }
  }
}
</script>

<style scoped>

</style>
